import Link from 'next/link';
import Image from 'next/image';

interface NewsItem {
  id: string;
  title: string;
  summary: string;
  imageUrl: string;
  publishDate: string;
  category: {
    id: string;
    name: string;
  };
}

// 模拟分类数据
const categories = {
  tech: { id: 'tech', name: '科技' },
  finance: { id: 'finance', name: '财经' },
  sports: { id: 'sports', name: '体育' },
};

// 模拟新闻数据
const mockNews: NewsItem[] = [
  {
    id: '1',
    title: '分类新闻标题1',
    summary: '这是一段新闻摘要，描述了新闻的主要内容...',
    imageUrl: 'https://picsum.photos/300/200?random=4',
    publishDate: '2024-01-20',
    category: { id: 'tech', name: '科技' },
  },
  {
    id: '2',
    title: '分类新闻标题2',
    summary: '这是另一段新闻摘要，描述了新闻的主要内容...',
    imageUrl: 'https://picsum.photos/300/200?random=5',
    publishDate: '2024-01-20',
    category: { id: 'tech', name: '科技' },
  },
  {
    id: '3',
    title: '分类新闻标题3',
    summary: '这是第三段新闻摘要，描述了新闻的主要内容...',
    imageUrl: 'https://picsum.photos/300/200?random=6',
    publishDate: '2024-01-20',
    category: { id: 'tech', name: '科技' },
  },
];

export default function CategoryPage({ params }: { params: { id: string } }) {
  const category = categories[params.id as keyof typeof categories];

  return (
    <div className="container mx-auto px-4 py-8">
      {/* 面包屑导航 */}
      <div className="breadcrumb mb-8">
        <nav className="flex text-gray-500 text-sm">
          <Link href="/" className="hover:text-blue-600">
            首页
          </Link>
          <span className="mx-2">/</span>
          <span className="text-gray-900">{category?.name || '分类'}</span>
        </nav>
      </div>

      {/* 分类标题 */}
      <h1 className="text-3xl font-bold mb-8">{category?.name || '分类'}新闻</h1>

      {/* 新闻列表 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {mockNews.map((news) => (
          <Link
            key={news.id}
            href={`/news/${news.id}`}
            className="block bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
          >
            <div className="relative h-48">
              <Image src={news.imageUrl} alt={news.title} fill className="object-cover" />
            </div>
            <div className="p-4">
              <h3 className="text-xl font-semibold mb-2 line-clamp-2">{news.title}</h3>
              <p className="text-gray-600 text-sm line-clamp-3 mb-4">{news.summary}</p>
              <div className="flex justify-between items-center text-sm text-gray-500">
                <span>{news.publishDate}</span>
                <span className="text-blue-600">{news.category.name}</span>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}
